<template>
  <div>
    <!-- 新建的弹窗 -->
    <el-dialog
      title="新增工单"
      :visible="createVisible"
      @close="closecreateDialog"
      width="35%"
      custom-class="classRadius"
    >
      <el-form
        :model="ruleFormCreate"
        :rules="rulesCreate"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="设备编号:" prop="innerCode" placeholder="请输入">
          <el-input
            v-model="ruleFormCreate.innerCode"
            @blur="innerCodeInput"
            maxlength="15"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="工单类型:" prop="productType">
          <el-select v-model="ruleFormCreate.productType" placeholder="请选择" style="width: 100%">
            <el-option
              v-for="item in allTaskTypeList"
              :key="item.typeName"
              :label="item.typeName"
              :value="item.typeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运营人员:" prop="assignorId">
          <el-select v-model="ruleFormCreate.assignorId" placeholder="请选择" style="width: 100%">
            <el-option
              v-show="roleNameList.lengtn !== 0"
              v-for="item in roleNameList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" prop="desc">
          <el-input
            type="textarea"
            v-model="ruleFormCreate.desc"
            placeholder="请输入内容(不超过40个字符)"
            maxlength="40"
            show-word-limit
            :autosize="{ minRows: 4, maxRows: 6 }"
          ></el-input>
        </el-form-item>
        <el-form-item center>
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="createVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 查看详情 -->
    <el-dialog
      title="工单详情"
      :visible="outerVisible"
      @close="closeOuterDialog"
      width="35%"
      custom-class="classRadius"
    >
      <div v-if="this.clickValue.taskStatusTypeEntity.statusName === '取消'">
        <el-alert title="取消" :closable="false" type="info" show-icon></el-alert>
        <div class="pic"><img src="~@/assets/images/cancle.png" /></div>
      </div>
      <div v-else-if="this.clickValue.taskStatusTypeEntity.statusName === '完成'">
        <el-alert title="完成" :closable="false" type="success" show-icon></el-alert>
        <div class="pic"><img src="~@/assets/images/complete.png" /></div>
      </div>
      <div v-else>
        <el-alert title="代办" :closable="false" type="warning" show-icon></el-alert>
        <div class="pic"><img src="~@/assets/images/await.png" /></div>
      </div>
      <div class="content">
        <div class="text">
          <p>设备编号:</p>
          <span>{{ clickValue.taskCode || '' }}</span>
        </div>
        <div class="text">
          <p>创建日期:</p>
          <span>{{ clickValue.createTime || '' }}</span>
        </div>
        <div class="text" v-if="this.clickValue.taskStatusTypeEntity.statusName === '取消'">
          <p>取消日期:</p>
          <span>{{ clickValue.updateTime || '' }}</span>
        </div>
        <div class="text" v-else-if="this.clickValue.taskStatusTypeEntity.statusName === '完成'">
          <p>完成日期:</p>
          <span>{{ clickValue.updateTime || '' }}</span>
        </div>
        <div class="text" v-else style="display: none"></div>
        <div class="text">
          <p>运营人员:</p>
          <span>{{ clickValue.userName || '' }}</span>
        </div>
        <div class="text" v-if="this.clickValue.taskType">
          <p>工单类型:</p>
          <span>{{ clickValue.taskType.typeName || '' }}</span>
        </div>
        <div class="text">
          <p>工单方式:</p>
          <span>{{ clickValue.createType === 1 ? '手动' : '自动' }}</span>
        </div>
        <div class="text" v-if="this.clickValue.taskStatusTypeEntity.statusName === '取消'">
          <p>取消原因:</p>
          <span>{{ clickValue.desc || '' }}</span>
        </div>
        <div class="text" v-else>
          <p class="position">备注:</p>
          <span>{{ clickValue.desc || '' }}</span>
        </div>
        <div class="text" v-if="this.clickValue.taskStatusTypeEntity.statusName === '完成'">
          <p class="position">定位:</p>
          <span><i class="el-icon-location"></i>{{ clickValue.addr || '' }}</span>
        </div>
      </div>
      <div solt="footer" class="dialog-footer">
        <div v-if="this.clickValue.taskStatusTypeEntity.statusName === '取消'">
          <el-button type="warning" size="small" @click="resetCreate">重新创建</el-button>
        </div>
        <div v-else-if="this.clickValue.taskStatusTypeEntity.statusName === '完成'"></div>
        <div v-else>
          <el-button type="warning" size="small" @click="concleTask">取消工单</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { creatTaskAPI, allTaskTypeAPI, repairerListAPI, taskInfoAPI, concleTaskAPI } from '@/api'

export default {
  name: 'OperationDialog',
  data() {
    // 自定义校验规则
    const validatePass = (rules, value, callback) => {
      setTimeout(() => {
        if (!this.roleNameList.length) return callback(new Error('工单号不存在'))
      }, 1500)
    }
    return {
      // 防抖
      timer: null,
      // 新建弹窗
      createVisible: false,
      //  详情弹窗
      outerVisible: false,
      // 获取所有工单类型
      allTaskTypeList: [],
      // 工单点击项的数据
      clickValue: {
        taskType: {
          typeName: '' // 必须定义数据
        },
        taskStatusTypeEntity: {
          statusName: '' // 代办取消完成
        }
      },
      // 新建工单的配置信息
      ruleFormCreate: {
        assignorId: '',
        innerCode: '',
        productType: '',
        userId: 1,
        desc: '',
        createType: 1,
        details: []
      },
      // 规则校验
      rulesCreate: {
        innerCode: [
          { required: true, message: '请输入设备编号', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' },
          { validator: validatePass, trigger: ['change'] }
        ],
        productType: [{ required: true, message: '请选择工单类型', trigger: 'blur' }],
        assignorId: [{ required: true, message: '请选择运营人员', trigger: 'blur' }],
        desc: [
          { required: true, message: '请输入备注(不超过40字)', trigger: 'blur' },
          { min: 1, max: 40, message: '长度在 1 到 40 个字符', trigger: 'blur' }
        ]
      },
      // 新建输入框的运营员列表
      roleNameList: []
    }
  },
  created() {
    // 获取所有工单类型
    this.allTaskType()
  },
  mounted() {
    this.$bus.$on('createVisibleFn', () => {
      this.createVisible = true
    })
    this.$bus.$on('openOuterDialog', (row) => {
      this.openOuterDialog(row)
    })
  },
  beforeDestroy() {
    this.$bus.$off() // 销毁所有全局事件
  },
  methods: {
    // 所有工单类型
    async allTaskType() {
      try {
        const res = await allTaskTypeAPI()
        res.data = res.data.filter((item) => item.typeName !== '补货工单')
        this.allTaskTypeList = res.data
        return Promise.resolve(res)
      } catch (error) {
        return Promise.reject(error)
      }
    },
    closecreateDialog() {
      this.createVisible = false
      // 新增工单的配置信息重置
      this.ruleFormCreate = {
        assignorId: '',
        innerCode: '',
        productType: '',
        userId: 1,
        desc: '',
        createType: 1,
        details: []
      }
    },
    // 获取运营人员列表
    innerCodeInput() {
      this.timer = setTimeout(async () => {
        clearTimeout(this.timer)
        const res = await repairerListAPI(this.ruleFormCreate.innerCode)
        this.roleNameList = res.data
      }, 1000)
    },
    // 新增工单的确认
    async submitForm() {
      if (
        !this.ruleFormCreate.assignorId ||
        !this.ruleFormCreate.innerCode ||
        !this.ruleFormCreate.productType ||
        !this.ruleFormCreate.desc
      ) {
        return this.$message({
          type: 'warning',
          message: '请输入内容',
          offset: 75
        })
      }
      try {
        const res = await creatTaskAPI(this.ruleFormCreate)
        this.$message({
          type: 'success',
          message: '新增成功',
          offset: 75
        })
        this.$emit('freshPage')
        this.createVisible = false
        return Promise.resolve(res)
      } catch (error) {
        this.$message({
          type: 'error',
          message: ` ${error.response.data}`,
          offset: 75
        })
        // return Promise.reject(error.response.data)
      }
    },
    // 列表操作的查看详情 // 外层弹窗
    openOuterDialog(value) {
      console.log(value)
      this.clickValue = value
      this.outerVisible = true
    },
    // 外层弹窗关闭事件
    closeOuterDialog() {
      this.outerVisible = false
    },
    // 取消工单
    concleTask() {
      this.$confirm('取消工单后，将不能恢复，是否确认取消？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await concleTaskAPI({
          taskId: this.clickValue.taskId,
          desc: this.clickValue.decs
        })
        this.$message({
          type: 'success',
          message: '取消成功!',
          offset: 75
        })
        this.$emit('freshPage') // 刷新页面
        this.outerVisible = false
      })
    },
    // 重新创建
    async resetCreate() {
      const res = await taskInfoAPI(this.clickValue.taskId)
      this.ruleFormCreate.innerCode = res.data.innerCode
      this.ruleFormCreate.productType = res.data.productTypeId
      this.ruleFormCreate.desc = res.data.desc
      // this.ruleFormCreate.assignorId = res.data.assignorId
      this.createVisible = true
      // console.log(this.ruleFormCreate)
      // 获取运维人员数据
      this.innerCodeInput()
    }
  }
}
</script>
<style lang="less" scoped>
.el-dialog {
  position: relative;
  background-color: #fff;
  .pic {
    position: absolute;
    top: 70px;
    right: 80px;
    width: 80px;
    height: 120px;
  }
  .content {
    width: 100%;
    min-height: 200px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .text {
      width: 260px;
      height: 36px;
      display: flex;
      font-size: 14px;
      color: #666;
      text-align: center;
      // line-height: 36px;
      .position {
        width: 40px;
      }
      p {
        margin-left: 40px;
      }
      span {
        margin-left: 20px;
        // line-height: 15px;
        .el-icon-location:before {
          content: '\e79e';
          color: #5f84ff;
          font-size: 20px;
        }
      }
      .count {
        color: #5f84ff;
        cursor: pointer;
      }
    }
  }
  .dialog-footer {
    text-align: center;
  }
}
.el-alert {
  height: 60px;
  /deep/.el-icon-info:before {
    font-size: 30px;
    color: #333;
  }
  /deep/.el-icon-success:before {
    font-size: 30px;
    // color: #333;
  }
  /deep/.el-icon-warning:before {
    font-size: 30px;
    // color: #333;
  }
  /deep/.el-alert__title {
    margin-left: 10px;
    color: #333;
  }
}
</style>
<style lang="less">
.classRadius {
  border-radius: 10px;
}
</style>
